<template>
	<view class="BaseToast">
		<u-popup :show="show" mode="center" @close="close">
			<view class="popup">
				<view class="tips">{{ title }}</view>
				<view class="contents" v-html="content" v-if="content && content.length > 0"></view>
				<u-checkbox-group v-if="locationFlag" placement="column">
					<u-checkbox label="不再提示" shape="circle" activeColor="#FF5900" v-model="checkBoxValue" :customStyle="{ marginBottom: '20px' }"></u-checkbox>
				</u-checkbox-group>
				<view :style="{ justifyContent: showClose ? 'space-between' : 'center' }" class="popup-footer">
					<button style="margin-right: 15rpx;" v-if="showClose" class="btn" @click="close">{{ locationFlag ? '关闭' : '取消' }}</button>
					<button style="margin-left: 15rpx;" class="btn active" :loading="loading" @click="submit">{{ btnName }}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';

export default {
	name: 'BaseToast',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		locationFlag: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ''
		},
		btnName: {
			type: String,
			default: '确定'
		},
		content: {
			type: String,
			default: ''
		},
		loading: {
			type: Boolean,
			default: false
		},
		showClose: {
			type: Boolean,
			default: true
		}
	},

	data() {
		return {
			checkBoxValue: false
		};
	},
	options: {
		styleIsolation: 'shared' // 解除样式隔离
	},
	methods: {
		...mapMutations('user', ['SET_NOMORESHOWLOCATION']),

		// 关闭
		close() {
			this.$emit('cancel', this.checkBoxValue);
		},
		// 提交
		submit() {
			this.$emit('submit');
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-popup__content {
	width: 622rpx;
	height: auto;
	background-color: transparent !important;
	border-radius: 20rpx !important;
}

::v-deep .u-checkbox-label--left {
	display: flex;
	justify-content: center;
}

.popup {
	padding: 32rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;

	.tips {
		margin: 0 auto 56rpx;
		width: 462rpx;
		height: auto;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 500;
		color: #1a1a1a;
		line-height: 48rpx;
		text-align: center;
	}

	.contents {
		// margin: 0rpx -20rpx -20rpx 56rpx;
		// width: 462rpx;
		margin-top: 40rpx;
		height: auto;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1a1a1a;
		line-height: 48rpx;
		margin-top: -35rpx;
		margin-bottom: 35rpx;
	}

	&-footer {
		display: flex;
		justify-content: space-between;

		.btn {
			margin: 0;
			width: 267rpx;
			height: 80rpx;
			border-radius: 39rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			border: 0;
			background: #f5f5f5;
			color: #666666;

			&.active {
				background: #FF5900;
				color: #ffffff;
			}
		}
	}
}
</style>
